<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="Keywords" content="网站关键词">
    <meta name="Description" content="网站介绍">
    <link rel="stylesheet" href="../../static/css/base.css">
    <link rel="stylesheet" href="../../static/css/iconfont.css">
    <link rel="stylesheet" href="../../static/css/reg.css">
    <link rel="shortcut icon" href="../../static/img/favicon.ico">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <style>
        .title{
            margin-left: 180px;
            margin-top: -50px;
        }
        .tel-tip{
            position: absolute;
            color: #33FF33;
            font-size: 12px;
            right: 0;
            top: 22px;
        }
    </style>
</head>
<body>
    <div id="ajax-hook"></div>
    <div class="wrap">
        <div class="wpn">
            <div class="form-data pos">
                <h2 class="title">凌飞羽协</h2>
                <!--<p class="tel-warn hide"><i class="icon-warn"></i></p>-->
                    <p class="p-input pos">
                        <label for="tel">手机号</label>
                        <input type="number" id="tel" name="account" autocomplete="off">
                        <span class="tel-warn tel-err hide"><em></em><i class="icon-warn"></i></span>
                        <span class="tel-tip hide"><em></em></span>
                    </p>
                    <p class="p-input pos" id="sendcode">
                        <label for="code">输入验证码</label>
                        <input type="number" id="code" name="code">
                        <button onclick="checkPhone()" class="send">发送验证码</button>
                        <span class="time hide"><em>120</em>s</span>
                        <span class="error hide"><em></em><i class="icon-warn" style="margin-left: 5px"></i></span>
                    </p>
                    <p class="p-input pos pwd hide" id="pwd">
                        <label for="passport">输入密码</label>
                        <input type="password" id="password" style="display: none"/>
                        <input type="password" id="passport" name="password">
                        <span class="tel-warn pwd-err hide"><em></em><i class="icon-warn" style="margin-left: 5px"></i></span>
                    </p>
                    <p class="p-input pos confirmpwd hide" id="confirmpwd">
                        <label for="passport2">确认密码</label>
                        <input type="password" style="position:absolute;top:-998px"/>
                        <input type="password" id="passport2">
                        <span class="tel-warn confirmpwd-err hide"><em></em><i class="icon-warn" style="margin-left: 5px"></i></span>
                    </p>
                    <button onclick="getNext()" class="lang-btn next">下一步</button>
                    <button onclick="sub()" class="lang-btn register hide">注册</button>
                <div class="reg_checkboxline pos">
                    <span class="z"><i class="icon-ok-sign boxcol" nullmsg="请同意!"></i></span>
                    <input type="hidden" name="agree" value="1">
                    <div class="Validform_checktip"></div>
                    <p>我已阅读并接受 <a href="/index/rules" target="_brack">《羽协章程》</a></p>
                </div>
                <div class="bottom-info">已有账号，<a href="/index/login">马上登录</a></div>
                <div class="third-party">
                    <a href="#" class="log-qq icon-qq-round"></a>
                    <a href="#" class="log-qq icon-weixin"></a>
                    <a href="#" class="log-qq icon-sina1"></a>
                </div>
                <p class="right">Powered by © 2019</p>
            </div>
        </div>
    </div>
    <script>

        $(function () {
            $("#tel").blur(function () {
                var account = $("#tel").val()
                checkAccount(account)
            })
        })

        function checkPhone(){
            var phone = $("#tel").val()
            var status = true;
            if (checkAccount(phone)){
                $.ajax({
                    url: '/user/sendMsg',
                    type: 'get',
                    dataType: 'json',
                    async: false,
                    data: {phone:phone},
                    success:function(data){
                        if (data.status == 200){
                            alert("验证码发送成功")
                        }
                    },
                    error:function(){
                        status = false;
                        // return false;
                    }
                });
            } else {
                return false;
            }
            return status;
        }
        function sub(){
            $('.tel-err').addClass('hide');
            var account = $("#tel").val()
            var password1 = $("#passport").val()
            var password2 = $("#passport2").val()
            if (checkAccount(account) && checkPass(password1,password2)){
                var ldata = {account: account, password: password1};
                $.ajax({
                    url: '/user/register/',
                    type: 'post',
                    dataType: 'json',
                    async: false,
                    data: ldata,
                    success:function(data){
                        console.log(data)
                        if (data.satus == 500){
                            if (data.msg == "2"){
                                $('.error').removeClass('hide').find("em").text('请发送验证码');
                            }else if(data.msg == "4"){
                                $('.error').removeClass('hide').find("em").text('验证码错误');
                            }
                        }else if(data.status == 200){
                            window.location.href = "/index/prefect?account=" + account
                        }
                    },
                    error:function(){
                        status = false;
                        // return false;
                    }
                });
            }
        }

        function getNext() {
            var code = $.trim($('#code').val());
            if (checkCode(code)){
                $.ajax({
                    url: '/user/checkSmsCode',
                    type: 'post',
                    dataType: 'json',
                    async: true,
                    data: {code:code},
                    success: function (data) {
                        console.log(data)
                        if (data.status == 500){
                            if (data.msg == "1"){
                                $('.error').removeClass('hide').find("em").text('请发送验证码');
                            } else if (data.msg == "2"){
                                $('.error').removeClass('hide').find("em").text('验证码错误');
                            }
                        } else if (data.status == 200){
                            $('.pwd').removeClass('hide');
                            $('.confirmpwd').removeClass('hide');
                            $('.next').addClass('hide')
                            $('.register').removeClass('hide')
                            $('.error').addClass('hide');
                        }
                    }
                });
            }
        }

        function checkAccount(username){
            if (username == '') {
                $('.tel-err').removeClass('hide').find("em").text('请输入账户');
                return false;
            }
            else {
                var param = /^1[34578]\d{9}$/;
                if (!param.test(username)) {
                    // globalTip({'msg':'手机号不合法，请重新输入','setTime':3});
                    $('.tel-err').removeClass('hide');
                    $('.tel-err').text('手机号不合法，请重新输入');
                    return false;
                }

                $.ajax({
                    url:"/user/check/register",
                    type:"get",
                    dataType:"json",
                    async:false,
                    data:{account:username},
                    success:function (data) {
                        console.log(data)
                        if (data.status == 500){
                            if (data.msg == "已存在"){
                                $('.tel-tip').addClass('hide')
                                $('.tel-err').addClass('hide');
                                $('.tel-err').removeClass('hide').find("em").text('手机号已被注册');
                                return false;
                            }
                        }else if(data.status == 200){
                            $('.tel-err').addClass('hide')
                            $('.tel-tip').removeClass('hide').find("em").text('手机号可以注册');
                            return true;
                        }
                    }
                })
            }
        }

        function checkPass(pass1,pass2){
            if (pass1 == '') {
                $('.pwd-err').removeClass('hide').text('请输入密码');
                return false;
            }else if (pass1 != pass2){
                $('.confirmpwd-err').removeClass('hide').text('两次密码不一致');
            } else {
                $('.pwd-err').addClass('hide');
                $('.confirmpwd-err').addClass('hide');
                return true;
            }
        }

        function checkCode(code){
            if (code == '') {
                $('.error').removeClass('hide').text('请输入验证码');
                return false;
            } else {
                 $('.error').addClass('hide');
                return true;
            }
        }
    </script>
    <script src="../../static/js/agree.js"></script>
    <script src="../../static/js/reg.js"></script>
</body>
</html>